<template>
	<view>
		
		<cu-custom isBack="true" :bgColor="'bg-'+$themeColor()">
			<block slot="backText">返回</block>
			<block slot="content">新增小区信息</block>
		</cu-custom>
		
		<view :class="'bg-'+$bgColor()">
			
			<form @submit="formSubmit">
				
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-orange"></text> {{basicsList[basics].name}}
					</view>
					<view class="action">
						<button v-if="basics > 0" class="cu-btn bg-green shadow" @tap="LastSteps">
							上一步
						</button>
						<button v-if="basics < basicsList.length-1" class="cu-btn bg-green shadow" @tap="BasicsSteps">
							下一步
						</button>
						
						<button v-if="basics == basicsList.length-1" form-type="submit"  class="cu-btn bg-green shadow" :disabled="submiting">
							完成
						</button>
						
						<!-- <view class="padding flex flex-direction">
							<button form-type="submit" class="cu-btn bg-blue margin-tb-sm lg" :disabled="submiting">提交</button>
						</view> -->
						
						<!-- <button class="cu-btn bg-green shadow" @tap="BasicsSteps">
							{{basics == basicsList.length-1?'完成':'下一步'}}
						</button> -->
					</view>
				</view>
				
				<view class="bg-white padding">
					<view class="cu-steps">
						<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
							<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
						</view>
					</view>
				</view>
				
				
				<view :style="basics==0?'display:block':'display:none'" >
					
					<view class="cu-form-group ">
						<view class="title" >区域:</view>
						<input  name="zbqyItem.region" :value="data.region" style="display: none;"></input>
						
						<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
							<view class="picker">
								{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
							</view>
						</picker>
					</view>
					
					<view class="cu-form-group ">
						<view class="title" >小区名称:</view>
						<input  name="zbqyItem.areaName" :value="data.areaName" @input="onKeyAreaName"></input>
					</view>
					
					<view class="cu-form-group ">
						<view class="title" >所属区:</view>
						<input  name="zbqyItem.belongDistrict" :value="data.belongDistrict" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >所属工程:</view>
						<input  name="zbqyItem.belongProject" :value="data.belongProject" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >所属街道:</view>
						<input  name="zbqyItem.belongStreet" :value="data.belongStreet" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >小区类型:</view>
						<input  name="zbqyItem.areaType" :value="data.areaType" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >小区地址:</view>
						<input  name="zbqyItem.areaAddress" :value="data.areaAddress" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >小区正本清源方案类型:</view>
						<input  name="zbqyItem.planType" :value="data.planType" ></input>
					</view>
					
					<view class="cu-form-group ">
						<view class="title" >是否验收:</view>
						<input  name="zbqyItem.checkState" :value="data.checkState" style="display: none;"></input>
						<switch @change="SwitchCheckState" :class="data.checkState=='是'?'checked':''" :checked="data.checkState=='是'?true:false"></switch>
					</view>
					<view class="cu-form-group ">
						<view class="title" >是否移交:</view>
						<input  name="zbqyItem.transferState" :value="data.transferState" style="display: none;"></input>
						<switch @change="SwitchTransferState" :class="data.transferState=='是'?'checked':''" :checked="data.transferState=='是'?true:false"></switch>
					</view>
				
				</view>
				
				<!-- <view v-if="basics==1"> -->
				<view :style="basics==1?'display:block':'display:none'" >
					<!-- <view class="cu-form-group ">
						<view class="title">区域:</view>
						<input name="region" :value="data.region" style="display: none;"></input>
						
						<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
							<view class="picker">
								{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题类别:</view>
						<input name="questionCategory" :value="data.questionCategory" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">小区名称:</view>
						<input name="areaName" :value="data.areaName" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">申报主体:</view>
						<input name="declarationSubject" :value="data.declarationSubject" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">所属街道:</view>
						<input name="belongStreet" :value="data.belongStreet" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">所属社区:</view>
						<input name="belongDistrict" :value="data.belongDistrict" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">所属工程:</view>
						<input name="belongProject" :value="data.belongProject" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">检查日期:</view>
						<input name="checkDate" :value="data.checkDate" style="display: none;"></input>
						<picker mode="date" :value="data.checkDate" start="2015-09-01" end="2120-01-01" @change="DateChange">
							<view class="picker">
								{{$formatDate(data.checkDate) != ''  ? $formatDate(data.checkDate):'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题类型:</view>
						<input name="questionType" :value="data.questionType" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题描述:</view>
						<input name="questionDesc" :value="data.questionDesc" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题发生位置:</view>
						<input name="questionDesc" :value="data.questionPosition" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >位置图片:</view>
						<view class="grid col-4 grid-square flex-sub">
							<input name="positionPicture" :value="data.positionPicture"  style="display: none;"></input>
							<image style="width: 120px; height: 120px;" :src="positionPictureImg==''? $api+'/system/file/getProjectPicture/'+data.positionPictureBase64:positionPictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="positionPictureImg==''? $api+'/system/file/getProjectPicture/'+data.positionPictureBase64:positionPictureImg"></image>
						</view>
						
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids" @tap="positionPictureChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title" >现场图片:</view>
						<view class="grid col-4 grid-square flex-sub">
							<input name="scenePicture" :value="data.scenePicture"  style="display: none;"></input>
							<image style="width: 120px; height: 120px;" :src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg"></image>
						</view>
						
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids" @tap="scenePictureChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">整改情况:</view>
						<input name="rectification" :value="data.rectification" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >整改图片:</view>
						<view class="grid col-4 grid-square flex-sub">
							<input name="rectificationPicture" :value="data.rectificationPicture"  style="display: none;"></input>
							<image style="width: 120px; height: 120px;" :src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg"></image>
						</view>
						
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids" @tap="rectificationPictureChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">工区:</view>
						<input name="workArea" :value="data.workArea" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">施工单位联系人:</view>
						<input name="constructionPerson" :value="data.constructionPerson" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">运营单位联系人:</view>
						<input name="operatePerson" :value="data.operatePerson" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">运营单位是否为宝排:</view>
						<input name="operateState" :value="data.operateState" style="display: none;"></input>
						<switch @change="SwitchOperateState" :class="data.operateState=='是'?'checked':''" :checked="data.operateState=='是'?true:false"></switch>
					</view>
					<view class="cu-form-group ">
						<view class="title">是否移交:</view>
						<input name="transferState" :value="data.transferState" style="display: none;"></input>
						<switch @change="SwitchTransferState" :class="data.transferState=='是'?'checked':''" :checked="data.transferState=='是'?true:false"></switch>
					</view> -->
				</view>
				
				<!-- <view v-if="basics==2"> -->
				<view :style="basics==2?'display:block':'display:none'" >
					<!-- <view class="cu-form-group ">
						<view class="title">区域:</view>
						<input name="region" :value="data.region" style="display: none;"></input>
						
						<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
							<view class="picker">
								{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title" >第几次:</view>
						<input name="timeName" :value="data.timeName" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题类别:</view>
						<input name="questionCategory" :value="data.questionCategory" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">所属工程:</view>
						<input name="belongProject" :value="data.belongProject" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">小区名称:</view>
						<input name="areaName" :value="data.areaName" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">所属街道:</view>
						<input name="belongStreet" :value="data.belongStreet" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">检查日期:</view>
						<input name="checkDate" :value="data.checkDate" style="display: none;"></input>
						<picker mode="date" :value="data.checkDate" start="2015-09-01" end="2120-01-01" @change="DateChange">
							<view class="picker">
								{{$formatDate(data.checkDate) != ''  ? $formatDate(data.checkDate):'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题类型:</view>
						<input name="questionType" :value="data.questionType" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">问题描述:</view>
						<input name="questionDesc" :value="data.questionDesc" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >现场图片:</view>
						<view class="grid col-4 grid-square flex-sub">
							<input name="scenePicture" :value="data.scenePicture"  style="display: none;"></input>
							<image style="width: 120px; height: 120px;" :src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg"></image>
						</view>
						
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids" @tap="scenePictureChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">整改情况:</view>
						<input name="rectification" :value="data.rectification" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >整改图片:</view>
						<view class="grid col-4 grid-square flex-sub">
							<input name="rectificationPicture" :value="data.rectificationPicture"  style="display: none;"></input>
							<image style="width: 120px; height: 120px;" :src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg"></image>
						
						</view>
						
						<view class="grid col-4 grid-square flex-sub">
							<view class="solids" @tap="rectificationPictureChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">是否整改:</view>
						<input name="rectificationState" :value="data.rectificationState" style="display: none;"></input>
						<switch @change="SwitchRectificationState" :class="data.rectificationState=='是'?'checked':''" :checked="data.rectificationState=='是'?true:false"></switch>
					</view> 
					<view class="cu-form-group ">
						<view class="title">复查日期:</view>
						<input name="reviewDate" :value="data.reviewDate" style="display: none;"></input>
						<picker mode="date" :value="data.reviewDate" start="2015-09-01" end="2120-01-01" @change="reviewDateChange">
							<view class="picker">
								{{$formatDate(data.reviewDate) != ''  ? $formatDate(data.reviewDate):'请选择'}}
							</view>
						</picker>
					</view> -->
				</view>
				
				<!-- <view v-if="basics==3"> -->
				<view :style="basics==3?'display:block':'display:none'" >
					<view class="cu-form-group ">
						<view class="title" >区域:</view>
						<input  name="zbqyScore.region" :value="data.region" style="display: none;"></input>
						<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
							<view class="picker">
								{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title" >第几次:</view>
						<input  name="zbqyScore.timeName" :value="data.timeName" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >查看时间:</view>
						<input  name="zbqyScore.viewTime" :value="data.viewTime" style="display: none;"></input>
						
						<picker mode="date" :value="data.viewTime" start="2015-09-01" end="2120-01-01" @change="DateChange">
							<view class="picker">
								{{$formatDate(data.viewTime) != ''  ? $formatDate(data.viewTime):'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title" >小区名称:</view>
						<input name="zbqyScore.areaName" :value="data.areaName" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >所属工程:</view>
						<input  name="zbqyScore.belongProject" :value="data.belongProject" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >所属街道:</view>
						<input  name="zbqyScore.belongStreet" :value="data.belongStreet" ></input>
					</view>
									
					<view class="cu-form-group ">
						<view class="title" >工程建设平均分1:</view>
						<input  name="zbqyScore.engineeringConstructionAverage1" :value="data.engineeringConstructionAverage1" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >运营维护平均分1:</view>
						<input  name="zbqyScore.operationMaintenanceAverage1" :value="data.operationMaintenanceAverage1" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >监督管理平均分1:</view>
						<input  name="zbqyScore.supervisionAverage1" :value="data.supervisionAverage1" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >得分合计1:</view>
						<input  name="zbqyScore.totalScore1" :value="data.totalScore1" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >工程建设评分2:</view>
						<input  name="engineeringConstructionScore2" :value="data.engineeringConstructionScore2" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >运营维护评分2:</view>
						<input  name="zbqyScore.operationMaintenanceScore2" :value="data.operationMaintenanceScore2" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >监督管理评分2:</view>
						<input  name="zbqyScore.supervisionScore2" :value="data.supervisionScore2" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >得分合计2:</view>
						<input  name="zbqyScore.totalScore2" :value="data.totalScore2" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >工程建设评分3:</view>
						<input  name="zbqyScore.engineeringConstructionScore3" :value="data.engineeringConstructionScore3" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >运营维护评分3:</view>
						<input  name="zbqyScore.operationMaintenanceScore3" :value="data.operationMaintenanceScore3" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >监督管理评分3:</view>
						<input  name="zbqyScore.supervisionScore3" :value="data.supervisionScore3" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >得分合计3:</view>
						<input  name="zbqyScore.totalScore3" :value="data.totalScore3" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >平均分:</view>
						<input  name="zbqyScore.average" :value="data.average" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >工程建设平均分:</view>
						<input  name="zbqyScore.engineeringConstructionAverage" :value="data.engineeringConstructionAverage" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >运营维护平均分:</view>
						<input  name="zbqyScore.operationMaintenanceAverage" :value="data.operationMaintenanceAverage" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >监督管理平均分:</view>
						<input  name="zbqyScore.supervisionAverage" :value="data.supervisionAverage1" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >结论:</view>
						<input  name="zbqyScore.conclusion" :value="data.conclusion" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >负责人:</view>
						<input  name="zbqyScore.chargePerson" :value="data.chargePerson" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >备注:</view>
						<input  name="zbqyScore.remark" :value="data.remark" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title" >是否授牌:</view>
						<input  name="zbqyScore.awardState" :value="data.awardState" style="display: none;"></input>
						<switch @change="SwitchAwardState" :class="data.awardState=='是'?'checked':''" :checked="data.awardState=='是'?true:false"></switch>
						
						<view class="title" >是否移交:</view>
						<input  name="zbqyScore.transferState" :value="data.transferState" style="display: none;"></input>
						<switch @change="SwitchTransferState" :class="data.transferState=='是'?'checked':''" :checked="data.transferState=='是'?true:false"></switch>
					
					</view>
					<view class="cu-form-group ">
						<view class="title" >运营单位:</view>
						<input  name="zbqyScore.operationUnit" :value="data.operationUnit" ></input>
					</view>
					
					<view class="padding flex flex-direction">
						<button form-type="submit" class="cu-btn bg-blue margin-tb-sm lg" :disabled="submiting">提交</button>
					</view>
					
				</view>
				
			</form>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicsList: [{
					cuIcon: 'usefullfill',
					name: '小区信息'
				}, {
					cuIcon: 'radioboxfill',
					name: '问题清单(宝安)'
				}, {
					// cuIcon: 'roundclosefill',
					cuIcon: 'radioboxfill',
					name: '问题清单(龙华、坪山)'
				}, {
					cuIcon: 'roundcheckfill',
					name: '专家评分'
				}, ],
				basics: 0,
				data: {
					'region':'请选择',
					'checkState':'是',
					'transferState':'是'
				},
				scoredata:{},
				regionPicker:[],
				regionPickerIndex:-1,
				submiting:false,
				questionData:[],
				troubleData:[],
				scoreData:[],
			}
		},
		onLoad(){
			// 获取区域信息
			this.getRegion();
		},
		methods: {
			BasicsSteps() {
				this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1				
			},
			LastSteps() {
				this.basics= this.basics == 0 ? 0 : this.basics - 1				
			},
			getRegion(){
				var dictData = {dictType:'zbqy_region'}
				this.$httpPost('/system/dict/data/list' , dictData).then(res => {
					// this.data = res.data.data
					var array = res.data.rows;
					var regionPicker = [];
					for (var i = 0; i < array.length; i++) {  
						// console.log(array[i].dictValue);  
						regionPicker.push(array[i].dictValue)
					}
					this.regionPicker = regionPicker;
				})
			},
			SwitchCheckState(e){
				this.data.checkState = e.detail.value?'是':'否';
			},
			SwitchTransferState(e) {
				this.data.transferState = e.detail.value?'是':'否';
			},
			regionPickerChange(e){
				this.regionPickerIndex = e.detail.value
				this.data.region = this.regionPicker[this.regionPickerIndex]
			},
			onKeyAreaName(event){
				this.data.areaName = event.target.value
			},
			formSubmit(e){
				this.submiting = true;
				
				var formData = e.detail.value;
				
				console.log(e)
				
				this.$httpPost('/system/item/addAll' , formData).then(res => {
					console.log(res);
					this.$msg(res.data.msg);
				})
				
				
			},
		}
	}
</script>

<style>

</style>
